<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03计算器练习</title>
</head>
<body>
<input type="text" id="i1" placeholder="请输入数字1"> <br>
<input type="text" id="i2" placeholder="请输入数字2"><br>
<button onclick="calc('+')">加</button>
<button onclick="calc('-')">减</button>
<button onclick="calc('*')">乘</button>
<button onclick="calc('/')">除</button>

<h4>运算结果: <span></span></h4>

<script>

    function calc(o) {
        let input1 = document.getElementById('i1');
        let input2 = document.getElementById('i2');
        let i1 = parseFloat(input1.value);
        let i2 = parseFloat(input2.value);
        console.log(i1 ,typeof i1,i2,typeof i2)
        let span = document.querySelector('span');
        switch (o) {
            case '+':
                span.innerHTML = i1 + i2;
                break
            case '-':
                span.innerHTML = i1 - i2;
                break
            case '*':
                span.innerHTML = i1 * i2;
                break
            case '/':
                if (i2===0){
                    alert("被除数不能为零")
                    break
                }
                span.innerHTML = i1 / i2;
                break
        }

    }

</script>
</body>
</html>